<template>
    <div style="display: flex;width: 100%;height: 100vh; ">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h1
                    style="margin-top: 10px;margin-left: 30px;width: 120px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h1>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 是否显示 Dialog -->
                    <div :style='样式1'>
                        <h4>是否显示 Dialog : </h4>
                        <spen :style='样式2'>英:v-model,类型:boolean,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["v-model"]' size='small' @change="提交改变">
                        </el-radio-group></div>
                    <!-- Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入 -->
                    <div :style='样式1'>
                        <h4>标题 </h4>
                        <spen :style='样式2'>英:title,类型:string,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.title' size='small' @change="提交改变">
                            <el-radio label="我是标题">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 对话框的宽度，默认值为 50% -->
                    <div :style='样式1'>
                        <h4>宽度，默认值为 50% : </h4>
                        <spen :style='样式2'>英:width,类型:string / number,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.width' size='small' @change="提交改变">
                            <el-radio label="200px">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否为全屏 Dialog -->
                    <div :style='样式1'>
                        <h4>全屏 Dialog : </h4>
                        <spen :style='样式2'>英:fullscreen,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.fullscreen' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- dialog CSS 中的 margin-top 值，默认为 15vh -->
                    <div :style='样式1'>
                        <h4>dialog CSS 中的 margin-top 值，默认为 15vh : </h4>
                        <spen :style='样式2'>英:top,类型:string,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.top' size='small' @change="提交改变">
                            <el-radio label="20px">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否需要遮罩层 -->
                    <div :style='样式1'>
                        <h4>是否需要遮罩层 : </h4>
                        <spen :style='样式2'>英:modal,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.modal' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                    <!-- 是否在 Dialog 出现时将 body 滚动锁定 -->
                    <div :style='样式1'>
                        <h4>是否在 Dialog 出现时将 body 滚动锁定 : </h4>
                        <spen :style='样式2'>英:lock-scroll,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["lock-scroll"]' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                    <!-- dialog 打开的延时时间，单位毫秒 -->
                    <div :style='样式1'>
                        <h4>dialog 打开的延时时间，单位毫秒 : </h4>
                        <spen :style='样式2'>英:open-delay,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["open-delay"]' size='small' @change="提交改变">
                            <el-radio label=2000>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- drawer 关闭的延时时间，单位毫秒 -->
                    <div :style='样式1'>
                        <h4>drawer 关闭的延时时间，单位毫秒 : </h4>
                        <spen :style='样式2'>英:close-delay,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-delay"]' size='small' @change="提交改变">
                            <el-radio label=2000>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可以通过点击 modal 关闭 Dialog -->
                    <div :style='样式1'>
                        <h4>点击 modal 关闭 Dialog : </h4>
                        <spen :style='样式2'>英:close-on-click-modal,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-on-click-modal"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可以通过按下 ESC 关闭 Dialog -->
                    <div :style='样式1'>
                        <h4>按下 ESC 关闭 Dialog : </h4>
                        <spen :style='样式2'>英:close-on-press-escape,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-on-press-escape"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否显示关闭按钮 -->
                    <div :style='样式1'>
                        <h4>示关闭按钮 : </h4>
                        <spen :style='样式2'>英:show-close,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["show-close"]' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. -->
                    <div :style='样式1'>
                        <h4>关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. : </h4>
                        <spen :style='样式2'>英:before-close,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性[":before-close"]'
                            size='small' @change="提交改变">
                            <el-radio label="关闭前的回调()自己写方法">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 为 Dialog 启用可拖拽功能 -->
                    <div :style='样式1'>
                        <h4>为 Dialog 启用可拖拽功能 : </h4>
                        <spen :style='样式2'>英:draggable,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.draggable' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否让 Dialog 的 header 和 footer 部分居中排列 -->
                    <div :style='样式1'>
                        <h4>是否让 Dialog 的 header 和 footer 部分居中排列 : </h4>
                        <spen :style='样式2'>英:center,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.center' size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否水平垂直对齐对话框 -->
                    <div :style='样式1'>
                        <h4>是否水平垂直对齐对话框 : </h4>
                        <spen :style='样式2'>英:align-center,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["align-center"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当关闭 Dialog 时，销毁其中的元素 -->
                    <div :style='样式1'>
                        <h4>当关闭 Dialog 时，销毁其中的元素 : </h4>
                        <spen :style='样式2'>英:destroy-on-close,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["destroy-on-close"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 自定义关闭图标，默认 Close -->
                    <div :style='样式1'>
                        <h4>自定义关闭图标，默认 Close : </h4>
                        <spen :style='样式2'>英:close-icon,类型:string / Component,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["close-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 -->
                    <div :style='样式1'>
                        <h4>和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 : </h4>
                        <spen :style='样式2'>英:z-index,类型:number,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["z-index"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- header 的 aria-level 属性 -->
                    <div :style='样式1'>
                        <h4>header 的 aria-level 属性 : </h4>
                        <spen :style='样式2'>英:header-aria-level,类型:string,默认:2</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["header-aria-level"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                            <h2 style="margin-top: 15px;background-color:rgb(63, 45, 45);color: aliceblue;">-------触发的事件 -----</h2>
                    <!-- Dialog 打开的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 打开的回调 : </h4>
                        <spen :style='样式2'>英:open,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.open'
                            size='small' @change="提交改变">
                            <el-radio label="打开的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 打开动画结束时的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 打开动画结束时的回调 : </h4>
                        <spen :style='样式2'>英:opened,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.opened'
                            size='small' @change="提交改变">
                            <el-radio label="打开动画结束时的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 关闭的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 关闭的回调 : </h4>
                        <spen :style='样式2'>英:close,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.close'
                            size='small' @change="提交改变">
                            <el-radio label="关闭的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Dialog 关闭动画结束时的回调 -->
                    <div :style='样式1'>
                        <h4>Dialog 关闭动画结束时的回调 : </h4>
                        <spen :style='样式2'>英:closed,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件.closed'
                            size='small' @change="提交改变">
                            <el-radio label="关闭动画结束时的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入焦点聚焦在 Dialog 内容时的回调 -->
                    <div :style='样式1'>
                        <h4>输入焦点聚焦在 Dialog 内容时的回调 : </h4>
                        <spen :style='样式2'>英:open-auto-focus,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["open-auto-focus"]'
                            size='small' @change="提交改变">
                            <el-radio label="输入焦点聚焦在Dialog内容时的回调">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 输入焦点从 Dialog 内容失焦时的回调 -->
                    <div :style='样式1'>
                        <h4>输入焦点从 Dialog 内容失焦时的回调 : </h4>
                        <spen :style='样式2'>英:close-auto-focus,类型:Function,默认:</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='事件["close-auto-focus"]'
                            size='small' @change="提交改变">
                            <el-radio label="输入焦点从Dialog内容失焦时的回调 ">有例子</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>

                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-button  :round=true size='small' type='primary'  @click="打开对话框" style="margin-top: 20px;" >打开对话框</el-button>
            <el-dialog v-model="是否打开" v-bind="属性" >我是内容 </el-dialog>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示" style="width: 98%;margin-top: 50px;"/>
        </div>
    </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive } from 'vue'
import{getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 是否打开 =ref(false)
 const  打开对话框=()=>{
	是否打开.value=!是否打开.value
 }

const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value,事件.value)
    代码.value=结果
    console.log(代码.value)
}

const 组件名 = ref('对话框')
const 属性 = ref({

    title:null,//Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入
    width:null,//对话框的宽度，默认值为 50%
    fullscreen:null,//是否为全屏 Dialog
    top:null,//dialog CSS 中的 margin-top 值，默认为 15vh
    modal:null,//是否需要遮罩层
    'modal-class':null,//遮罩的自定义类名
    'append-to-body':null,//Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
    //'append-to':null,//Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-body
    'lock-scroll':null,//是否在 Dialog 出现时将 body 滚动锁定
    'custom-class':null,//Dialog 的自定义类名
    'open-delay':null,//dialog 打开的延时时间，单位毫秒
    'close-delay':null,//drawer 关闭的延时时间，单位毫秒
    'close-on-click-modal':null,//是否可以通过点击 modal 关闭 Dialog
    'close-on-press-escape':null,//是否可以通过按下 ESC 关闭 Dialog
    'show-close':true,//是否显示关闭按钮
    ':before-close':null,//关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.
    draggable:null,//为 Dialog 启用可拖拽功能
    center:null,//是否让 Dialog 的 header 和 footer 部分居中排列
    'align-center':null,//是否水平垂直对齐对话框
    'destroy-on-close':null,//当关闭 Dialog 时，销毁其中的元素
    'close-icon':null,//自定义关闭图标，默认 Close
    'z-index':null,//和原生的 CSS 的 z-index 相同，改变 z 轴的顺序
    'header-aria-level':null,//header 的 aria-level 属性
})
const 事件=ref({
    open:null,//Dialog 打开的回调
    opened:null,//Dialog 打开动画结束时的回调
    close:null,//Dialog 关闭的回调
    closed:null,//Dialog 关闭动画结束时的回调
    'open-auto-focus':null,//输入焦点聚焦在 Dialog 内容时的回调
    'close-auto-focus':null,//输入焦点从 Dialog 内容失焦时的回调
})




const 重置组件=()=>{
    let 原生属性 = {
    title:null,//Dialog 对话框 Dialog 的标题， 也可通过具名 slot （见下表）传入
    width:null,//对话框的宽度，默认值为 50%
    fullscreen:null,//是否为全屏 Dialog
    top:null,//dialog CSS 中的 margin-top 值，默认为 15vh
    modal:null,//是否需要遮罩层
    'modal-class':null,//遮罩的自定义类名
    'append-to-body':null,//Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
    'append-to':null,//Dialog 挂载到哪个 DOM 元素 将覆盖 append-to-body
    'lock-scroll':null,//是否在 Dialog 出现时将 body 滚动锁定
    'custom-class':null,//Dialog 的自定义类名
    'open-delay':null,//dialog 打开的延时时间，单位毫秒
    'close-delay':null,//drawer 关闭的延时时间，单位毫秒
    'close-on-click-modal':null,//是否可以通过点击 modal 关闭 Dialog
    'close-on-press-escape':null,//是否可以通过按下 ESC 关闭 Dialog
    'show-close':true,//是否显示关闭按钮
    ':before-close':null,//关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候.
    draggable:null,//为 Dialog 启用可拖拽功能
    center:null,//是否让 Dialog 的 header 和 footer 部分居中排列
    'align-center':null,//是否水平垂直对齐对话框
    'destroy-on-close':null,//当关闭 Dialog 时，销毁其中的元素
    'close-icon':null,//自定义关闭图标，默认 Close
    'z-index':null,//和原生的 CSS 的 z-index 相同，改变 z 轴的顺序
    'header-aria-level':null,//header 的 aria-level 属性

    }
    let 原生事件={
        open:null,//Dialog 打开的回调
    opened:null,//Dialog 打开动画结束时的回调
    close:null,//Dialog 关闭的回调
    closed:null,//Dialog 关闭动画结束时的回调
    'open-auto-focus':null,//输入焦点聚焦在 Dialog 内容时的回调
    'close-auto-focus':null,//输入焦点从 Dialog 内容失焦时的回调
    }
    事件.value=原生事件
    属性.value=原生属性
    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')


</script>
<style scoped></style>
